<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>瀑布流</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#box {
				width: 1100px;
				padding: 10px 0;
				border: 5px solid red;
				margin: 20px auto;
				overflow: hidden;
			}
			ul {
				float: left;
				width: 200px;
				margin: 0 10px;
			}
			li {
				list-style: none;
				text-align: center;
				color: white;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul></ul>
			<ul></ul>
			<ul></ul>
			<ul></ul>
			<ul></ul>
		</div>
		<script type="text/javascript">
			function randomNumber(x,y){
				return Math.floor(Math.random()*(y-x+1)+x);
			}
			function randomColor(){
				var r = randomNumber(0,255);
				var g = randomNumber(0,255);
				var b = randomNumber(0,255);
				return "rgb("+r+","+g+","+b+")";
			}
			var uls = document.querySelectorAll("ul");
			
			for (var i = 1; i < 1001; i++) {
				var li = document.createElement("li");
				//随机高度
				li.style.height = randomNumber(100,300)+"px";
				//随机颜色
				li.style.backgroundColor = randomColor();
				//行高
				li.style.lineHeight = li.style.height;
				//文字
				li.innerHTML = i;
				lowerUl().appendChild(li);
							
				function lowerUl() {
					var min = Infinity;
					for (var i = 0; i<uls.length;i++) {
						min = min < uls[i].offsetHeight ? min:uls[i].offsetHeight;
					}
					for (var j = 0;j < uls.length;j++) {
						if (min == uls[j].offsetHeight){
						return uls[j];
						}
					}
				}
			}				
		</script>
	</body>
</html>
